<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="/command/jquery/jquery-3.4.1.js"></script>
    <style type="text/css">
        .talk_con {
            width: 600px;
            height: 500px;
            border: 1px solid #666;
            margin: 0px auto 0;
            background: #f9f9f9;
        }

        .talk_show {
            width: 580px;
            height: 420px;
            border: 1px solid #666;
            background: #fff;
            margin: 10px auto 0;
            overflow: auto;
        }

        .talk_input {
            width: 580px;
            margin: 10px auto 0;
        }

        .whotalk {
            width: 80px;
            height: 30px;
            float: left;
            outline: none;
        }

        .talk_word {
            width: 420px;
            height: 26px;
            padding: 0px;
            float: left;
            margin-left: 10px;
            outline: none;
            text-indent: 10px;
        }

        .talk_sub {
            width: 56px;
            height: 30px;
            float: left;
            margin-left: 10px;
        }

        .atalk {
            float: left;
            margin: 10px;
            height: 40px;
            width: 400px;
        }

        .atalk span {
            display: inline-block;
            background: #0181cc;
            border-radius: 10px;
            color: #fff;
            padding: 5px 10px;
        }

        .btalk {
            float: right;
            margin: 10px;
            height: 40px;
            width: 400px;
            text-align: right;
        }

        .btalk span {
            display: inline-block;
            background: #ef8201;
            border-radius: 10px;
            color: #fff;
            padding: 5px 10px;
        }

        .unread {
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        //以下获得目标用户头像
        window.onload = function () {

        };
    </script>
</head>
<body>
<div class="talk_con">
    <div class="talk_show" id="words">
        <!--        <div class="atalk"><span id="asay">A说：吃饭了吗？</span></div>-->
        <!--        <div class="btalk"><span id="bsay">B说：还没呢，你呢？</span></div>-->
    </div>

</div>

<script>

    let href = window.location.href;
    let arr = href.split('/');
    let idData = arr[arr.length - 1];
    let idArr = idData.split("&");
    let uid = idArr[0];
    let oid = idArr[1];
    let username = sessionStorage.getItem("username");
    let Words = document.getElementById("words");

    $.ajax({
        url: "/messageHistory/" + uid + "&" + oid,         //设置数据访问接口
        method: "GET",
        dataType: "json",
        async: false,
        success: function (data) {
            getPic();
            for (let i = 0; i < data.length; i++) {
                if (data[i].fromName === username) {
                    setMyMessage(data[i].messageText)
                } else {
                    setMessage(data[i].messageText)
                }
            }
        },
        error: function (errorMsg) {//请求失败执行的方法
            alert("获取后台数据失败！");
        }
    });

    function getPic() {
        $.ajax({
            type: "POST",
            url: "/getuserinfobyid/" + oid,
            async: false,
            success: function (result) {
                if (result != null) {
                    let oPic = result.pic;
                    sessionStorage.setItem("oPic", oPic);
                }
            },
            error: function (errorMsg) {
                alert("获取头像失败");
            }
        });
    }

    function setMyMessage(text) {
        let str = '<div class="atalk"><div id = "image" style="float: left"></div> <div style="float: left"><span>'   + text + '</span></div></div>';
        Words.innerHTML = Words.innerHTML + str;
        // 显示用户头像
        let img = document.createElement("img");
        let pic = sessionStorage.getItem("pic");
        img.src = "data:image/jpeg;base64," + pic;
        img.width = 30;
        img.height = 30;
        $("[id=image]").html(img);
    }


    function setMessage(messageText) {
        let str = '<div class="btalk"><div id = "oImage" style="float: right"></div><div style="float: right"><span>' + messageText + '</span></div></div>';
        Words.innerHTML = Words.innerHTML + str;
        //目标用户头像
        let oImg = document.createElement("img");
        let oPic = sessionStorage.getItem("oPic");

        oImg.src = "data:image/jpeg;base64," + oPic;
        oImg.width = 30;
        oImg.height = 30;
        $("[id=oImage]").html(oImg);
    }


</script>

</body>
</html>



